<template>
  <div class="scroll-wrap">
    <Scroll :on-reach-bottom="handleReachBottom" loading-text="loading">
      <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">
        <h2>{{ item.text}}</h2>
        <!-- <img v-bind:src="item.thumbnail" /> -->
        <video v-bind:src="item.video" controls="controls" preload="auto"></video>
      </Card>
    </Scroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list1: [],
      imglist: [],
    };
  },
  methods: {
    handleReachBottom() {
      return new Promise((resolve) => {
          debugger
          console.log(this.list1.length/10)
          console.log(this.list1.length/10 +1)
        setTimeout(() => {
          this.$axios
            .get("https://api.apiopen.top/getJoke?page="+(this.list1.length/10 +1) +"&count=10&type=video")
            .then((returnD) => {
              console.log(returnD);
              returnD.data.result.forEach(element => {
                  this.list1.push(element);
              });
              
            });
          
          resolve();
        }, 1000);
      });
    },
  },
  created() {
    this.$axios
      .get("https://api.apiopen.top/getJoke?page=1&count=10&type=video")
      .then((returnD) => {
        console.log(returnD);
        this.list1 = returnD.data.result;
      });
  },
};
</script>

<style>
/* // @deep : ~">>>";  */
.scroll-wrap .ivu-scroll-container {
  height: 520px !important;
  overflow-y: auto !important;
}
/* div{
    height: 100%;
    border: 1px solid red;
} */
</style>